<template>
  <div class="usersg" v-if="userData != ''">
    <div class="userTop">
      <div class="userbg">
        <img :src="userData.artist.cover" alt="" />
        <div class="Tdz"><span>TA的照</span></div>
      </div>
      <div class="return">
        <i class="iconfont icon-fanhui left" @click="$router.go(-1)"></i>
        <i class="iconfont icon-a-shuxing1a2sandianshuxiang right"></i>
      </div>
    </div>
    <div class="wrap"></div>
    <div class="usercunt">
      <img :src="userData.artist.cover" alt="" class="userImg" />
      <div class="fg"></div>
      <div class="userName">
        <h3>{{ userData.artist.name }}</h3>
        <img v-show="userData.identify.imageUrl" :src="userData.identify.imageUrl" alt="" />
      </div>
      <div class="fansCount">
        <span> {{ $route.query.fansCount | playCountData }} 粉丝</span>
        <span>{{
        userData.user ? `Lv.${userData.user.avatarDetail.identityLevel}` : ``
        }}</span>
      </div>
      <div class="identify">
        {{ userData.identify.imageDesc }}
      </div>
      <div class="gzortj">
        <div class="attention" :style="{ backgroundColor: userData.user.followed ? '#F3F3F3' : 'red' }">
          <span :style="{ color: userData.user.followed ?'#9E9E9E':'#fff'}">{{ userData.user.followed ? '已关注' : '+ 关注'
          }}</span>
        </div>
        <div class="similarity" @click="showges = !showges">
          <i class="iconXia" v-show="!showges"></i>
          <i class="iconshang" v-show="showges"></i>
        </div>
      </div>
      <div v-if="showges" class="xiangsges">
        <van-swipe :loop="false" :width="100" :show-indicators="false" class="my-swpie">
          <van-swipe-item class="item" v-for="(tsitem, index) in toObtainSimilarSinger" :key="index">
            <ul>
              <li>
                <img :src="tsitem.img1v1Url" alt="" />
                <h4 class="name">{{ tsitem.name }}</h4>
                <span class="fens">
                  {{ tsitem.fansCount | playCountData }}粉丝</span>
                <div class="guanzhu">
        
                  <span>+ 关注</span>  
                </div>
              </li>
            </ul>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="briefIntroduction">
      <van-tabs v-model="active" background="#F4F4F4" animated>
        <van-tab title="简介">
          <div class="intro">
            <!-- <h2>歌手简介</h2> -->
            <p style="color: #666" :class="{ akeNode: akeNodeShow }">
              {{ userData.artist.briefDesc }}
            </p>
            <div class="ckqb" @click.stop="akeNodeShow = !akeNodeShow">
              <span v-if="akeNodeShow"> 查看全部</span>
              <span v-else> 收起</span>
              <i class="iconXia" v-show="akeNodeShow"></i>
              <i class="iconshang" v-show="!akeNodeShow"></i>
            </div>
          </div>
        </van-tab>
        <van-tab title="歌曲">
          <musilcList :songs="singerSong"></musilcList>
        </van-tab>
        <van-tab title="专辑">
          <div class="singerAlbum">
            <ul>
              <li v-for="(item, index) in singerAlbum" :key="index">
                <img :src="item.picUrl" alt="" />
                <div class="count">
                  <h4>{{ item.name }}</h4>

                  <p>
                    {{ item.publishTime | timeFormater("YYYY-M-D") }}
                    {{ item.size }}首
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="视频">
          <div class="singerAlbum">
            <ul>
              <li v-for="(item, index) in singerMV" :key="index">
                <img :src="item.imgurl" alt="" />
                <div class="count">
                  <h4>{{ item.name }}</h4>
                  <p class="p_top">{{ item.publishTime }}</p>
                  <p class="p_top">{{ item.playCount | playCountData }}播放</p>
                </div>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="播客"></van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs"; //引入时间格式化插件
import {
  detailsForSinger,
  toObtainSimilarSinger,
  getSingerSong,
  getSingerAlbum,
  getSingerMV,
  
} from "@/api/singer";
import musilcList from "@/components/MusicList.vue";
export default {
  components: { musilcList },
  data() {
    return {
      active: 0,
      userData: [],
      activeNames: ["1"],
      showges: false,
      toObtainSimilarSinger: [], //相似歌手
      akeNodeShow: true, //歌手简介显示
      singerSong: [], //歌手单曲
      singerAlbum: [], //歌手专辑
      singerMV: [], //歌手mv
    };
  },

  filters: {
    playCountData(value) {
      let val = Math.floor(value / 1000);
      let w = value > 10000 ? val / 10 + "万" : value; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : w; //亿计算
      return y;
    },
    timeFormater(value, str = "YYYY-MM-DD HH:mm:ss") {
      return dayjs(value).format(str);
    },
  },

  methods: {
    detailsForSingerFun() {
      detailsForSinger(this.$route.query.id).then((data) => {
        console.log(data);
        this.userData = data.data;
      });
    },
    //获取相似歌手
    gettoObtainSimilarSinger() {
      toObtainSimilarSinger(this.$route.query.id).then((data) => {
        this.toObtainSimilarSinger = data.artists;
      });
    },
    //获取歌手单曲
    getSingerSongFun() {
      getSingerSong(this.$route.query.id).then((data) => {
        this.singerSong = data.songs;
      });
    },
    //获取歌手专辑
    getSingerAlbumFn() {
      getSingerAlbum(this.$route.query.id).then((data) => {
        this.singerAlbum = data.hotAlbums;
      });
    },
    // 获取歌手MV
    getSingerMVFn() {
      getSingerMV(this.$route.query.id).then((data) => {
        this.singerMV = data.mvs;
      });
    },
  },
  mounted() {},
  created() {
    this.detailsForSingerFun();
    this.gettoObtainSimilarSinger();
    this.getSingerSongFun();
    this.getSingerAlbumFn();
    this.getSingerMVFn();
  },
};
</script>


<style lang="scss" scoped>
.usersg {
  height: 100%;
  background-color: #f4f4f4;
}
.userTop {
  width: 100%;
  height: 100%;
  position: relative;
  .return {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    z-index: 2;
    justify-content: space-between;
    padding: 10px 5px;
    color: #e1d7ca;

    i {
      font-size: 26px;
    }

    .left {
    }
  }
  .userbg {
    width: 100%;

    background-repeat: no-repeat;
    position: relative;
    z-index: 1;

    img {
      width: 100%;
    }
    &::after {
      content: " ";
      background-color: rgba(0, 0, 0, 0.25);
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      // z-index: -1;
    }
    .Tdz {
      width: 70px;
      height: 25px;
      border-radius: 20px;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.1);
      z-index: 4;
      position: absolute;
      bottom: 100px;
      right: 20px;
      color: #e1d7ca;
      line-height: 25px;
      span {
        font-size: 8px;
      }
    }
  }
}
.wrap {
  width: 100%;
  height: 80px;
  position: absolute;
  top: 230px;
  z-index: 1;
  background-color: #f4f4f4;
}
.usercunt {
  width: 90%;
  // height: 100px;
  margin: 0 auto;
  background-color: #fff;
  margin-top: -90px;
  z-index: 1;
  border: 1px solid #f4f4f4;
  border-radius: 8px;
  position: relative;
  .userImg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    top: -30px;
    left: 40%;
  }
  .fg {
    width: 100%;
    height: 30px;
  }
  .userName {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
    h3 {
      font-weight: bold;
    }
    img {
      width: 18px;
      height: 18px;
      margin-left: 3px;
    }
  }
  .fansCount {
    display: flex;
    justify-content: center;
    font-size: 14px;
    color: #999;
    span {
      // flex: 1;
      // text-align: center;
      margin: 0 3px;
    }
  }
  .identify {
    text-align: center;
    margin: 8px 0;
    font-size: 13px;
    color: #999;
  }
  .gzortj {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    .attention {
     
      border-radius: 20px;
      margin-right: 10px;
      span {
        // color: #fff;
        line-height: 20px;
        padding: 0px 10px;
        font-size: 12px;
        line-height: 25px;
      }
    }
    .similarity {
      height: 25px;
      width: 25px;
      border-radius: 50%;
      border: 1px solid #999;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      .iconXia {
        display: block;
        background: url("@/assets/img/icon.png") no-repeat -65px -520px;
        width: 11px;
        height: 8px;
      }
      .iconshang {
        display: block;
        background: url("@/assets/img/icon.png") no-repeat -45px -520px;
        width: 11px;
        height: 8px;
      }
    }
  }
  .xiangsges {
    width: 100%;
    padding: 10px;
    background-color: #fff;
    .my-swpie {
      height: 100%;
      .item {
        width: 30%;
      }
    }
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin: 8px 0;
    }
  }
  ul {
    // display: flex;
    li {
      margin-right: 6px;
      border-radius: 10px;
      background-color: #f4f4f4;
      text-align: center;
      padding-bottom: 10px;
      &:first-child {
        margin-left: 5px;
      }
      h4 {
        font-size: 12px;
      }
      .fens {
        display: block;
        margin: 8px 0;
        font-size: 12px;
        color: rgb(111, 107, 107);
      }
      .guanzhu {
        width: 50px;
        border: 1px solid red;
        color: red;
        font-size: 12px;
        line-height: 14px;
        margin: auto;
        border-radius: 20px;
      }
    }
  }
}
.briefIntroduction {
  width: 100%;
  height: 100%;
  border-right: 10px;
  background-color: #f4f4f4;
  padding-bottom: 20px;
  .intro {
    width: 90%;
    background-color: #fff;
    margin: auto;
    margin-top: 5px;
    border-radius: 10px;
    h2 {
      font-size: 18px;
      margin-top: 5px;
      padding: 15px;
      font-weight: 700;
    }
    p {
      font-size: 14px;
      display: block;
      width: 100%;
      line-height: 25px;
      box-sizing: border-box;
      text-indent: 30px;
      padding: 4px 16px;
      text-align: justify;
    }
    .akeNode {
      -webkit-line-clamp: 3;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .ckqb {
      font-size: 14px;
      color: #666;
      text-align: center;
      margin-top: 5px;
      line-height: 30px;
      // border-top: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;

      .iconXia {
        display: block;
        background: url("@/assets/img/icon.png") no-repeat -65px -520px;
        width: 11px;
        height: 8px;
        margin-left: 5px;
      }

      .iconshang {
        display: block;
        background: url("@/assets/img/icon.png") no-repeat -45px -520px;
        width: 11px;
        height: 8px;
        margin-left: 5px;
      }
    }
  }
}
.singerAlbum {
  margin-top: 10px;
  background-color: #fff;
  ul {
    li {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      img {
        width: 50px;
        height: 50px;
        border-radius: 4px;
        margin: 0 10px;
      }

      .count {
        flex: 1;
        .p_top {
          margin-top: 3px;
        }
        h4 {
          font-size: 15px;
          width: 300px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        p {
          margin-top: 10px;
          font-size: 12px;
          color: #999;
        }
      }

      span {
        text-align: center;
        flex: 0 0 60px;
        font-size: 12px;
        margin-top: 25px;
        margin-right: 10px;
        color: #999;
      }
    }
  }
}
</style>